<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>DrawCircle</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            @keyframes show {
                0% {
                    opacity: 0;
                }
                100% {
                    opacity: 1;
                }
            }

            @keyframes hide {
                0% {
                    opacity: 1;
                }

                100% {
                    opacity: 0;
                }
            }
            .toast_box {
                /* width: 100%; */
                position: absolute;
                bottom: 50%;
                left: 50%;
                /* justify-content: center; */
                z-index: 10;
                transform: translate(-50%, -50%);
                display: none;
            }
            .toast_box p {
                box-sizing: border-box;
                padding: 10px 20px;
                width: max-content;
                /* 提示框的背景色 */
                background: #8be1ff;
                color: #fff;
                font-size: 16px;
                text-align: center;
                border-radius: 6px;
                opacity: 0.8;
            }
            .btn {
                text-decoration: none;
                border: none;
                padding: 12px 40px;
                font-size: 16px;
                background-color: green;
                color: #fff;
                border-radius: 5px;
                box-shadow: 7px 6px 28px 1px rgba(0, 0, 0, 0.24);
                cursor: pointer;
                outline: none;
                transition: 0.2s all;
            }
            .btn:active {
                transform: scale(0.98);
                box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24);
            }
        </style>
        <script id="vertex-shader" type="x-shader/x-vertex">
            attribute vec4 vPosition;
            uniform mat4 u_transMat;
            void main(){
              gl_Position = u_transMat * vPosition;
            }
        </script>
        <script id="fragment-shader" type="x-shader/x-fragment">
            precision mediump float;
            uniform vec4 u_FragColor;
            void main(){
                gl_FragColor = u_FragColor;
            }
        </script>
        <script type="text/javascript" src="webgl-utils.js"></script>
        <script type="text/javascript" src="initShaders.js"></script>
        <script type="text/javascript" src="drawCircleother.js"></script>

    </head>
    <body>
        <div class="toast_box">
            <p id="toast"></p>
        </div>
        <canvas id="gl-canvas" width="600" height="600">
            Oops ... your browser doesn't support the HTML5 canvas element
        </canvas>
        <button class="btn" onclick="All()">全选</button>
    </body>
</html>
